<template>
  <el-tree :data="data" node-key="label" :highlight-current="true">
    <span class="custom-tree-node" slot-scope="{ node, data }" @mouseover="mouseover(data)" @mouseleave="mouseout(data)">
      <span>{{ node.label }}</span>
      <div v-show="data.dropdownShow" @click.stop="()=>{}">
        <el-dropdown placement="right-start" trigger="click">
          <i class="el-icon-s-operation"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus" @click.native="addPeerTree(node,data)">新增同级</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus" @click.native="addChildrenTree(node,data)">新增下级</el-dropdown-item>
            <el-dropdown-item icon="el-icon-edit-outline" @click.native="updateTree(node,data)">修改</el-dropdown-item>
            <el-dropdown-item icon="el-icon-delete-solid" @click.native="delTree(node,data)">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </span>
  </el-tree>
</template>

<script>
import { map, range } from 'lodash'
// 构造树形数据
const treeData = [
  {
    label: 'Side menu'
  },
  ...map(range(1, 10), (index1) => ({
    label: 'Menu item  ' + index1,
    children: map(range(1, 20), (index2) => ({
      label: 'Menu item ' + index1 + '-' + index2,
      children: map(range(1, 5), (index3) => ({
        label: 'Menu item ' + index1 + '-' + index2 + '-' + index3
      }))
    }))
  }))
]

export default {
  name: 'DemoTreeSide',
  data () {
    return {
      data: treeData
    }
  },
  methods: {
    mouseover (data) { // 移入
      this.$set(data, 'dropdownShow', true)
    },
    mouseout (data) { // 移除
      this.$set(data, 'dropdownShow', false)
    },
    addPeerTree (node, data) {
      console.log('新增同级')
    },
    addChildrenTree (node, data) {
      console.log('新增下级')
    },
    updateTree (node, data) {
      console.log('修改')
    },
    updateTdelTreeree (node, data) {
      console.log('删除')
    }
  }
}
</script>
